---
title: WebcamVideoTexture
sourcecode: src/web/WebcamVideoTexture.tsx
---

[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-webcamvideotexture)
[![](https://img.shields.io/badge/-suspense-brightgreen)](https://r3f.docs.pmnd.rs/api/hooks#useloader)

<Intro>Create a video texture from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)</Intro>

```tsx
export type WebcamVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
  constraints?: MediaStreamConstraints
}
```

```jsx
<WebcamVideoTexture>
  {(texture) => <meshBasicMaterial map={texture} />}
```

or exposed via `ref`:

```jsx
const textureRef = useRef()
<WebcamVideoTexture ref={textureRef} />
```